<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Satellite Control Center - Astrium - TM Viewer</title>

<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript"
	src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script src="draw_TM.js"></script>
<script src="/AMRA-SCC/MobilityAccess/WebContent/WEB-INF/addTemplate.js"></script>
</head>

<body>
	<!-- Home -->


	<div data-role="page" id="pageSelect">
		<div id="panel-wrapper"></div>
		<div id="page-wrapper">
			<div data-role="header" id="header"></div>
			<div id="content-wrapper">
				<div data-role="navbar" id="navbar">
					<ul>
						<li><a href="../FOPViewer/index.html"
							data-transition="slidedown" rel="external">FOP
								Viewer</a></li>
						<li><a href="../LogMonitoring/logs.html"
							data-transition="slidedown" rel="external">Log Monitoring</a></li>
						<li><a href="#" data-transition="none" class="ui-btn-active">TM Viewer</a></li>
					</ul>
				</div>
				<div data-role="content" id="content">

					<!-- Select satellite-->
					<div data-role="fieldcontain" id="slect_satellite">
						<label for="select_Satellite"> Select Satellite: </label> <select
							id="select_Satellite" name="select_Satellite" data-mini="true">
							<option value="A1M">A1M</option>
							<option value="A1N">A1N</option>
							<option value="A2F">A2E</option>
							<option value="A2f">A2F</option>
						</select>
					</div>

					<!-- Select telemesure-->
					<div data-role="fieldcontain" id="slect_telemesure">
						<label for="select_Telemesure"> Select Telemesure: </label> <select
							id="select_Telemesure" name="select_telemesure" data-mini="true">
							<option value="tm2">tm1</option>
							<option value="tm2">tm2</option>
							<option value="tm3">tm3</option>
						</select>
					</div>

					<!-- Select start date-->
					<div>
						<label for="startdate">Start Date</label> <input name="startdate"
							id="startdate" type="date" data-role="datebox"
							data-options='{"mode": "calbox"}'>
					</div>
					<!-- Select end date-->
					<div>
						<label for="endate">End Date</label> <input name="endate"
							id="endate" type="date" data-role="datebox"
							data-options='{"mode": "calbox"}'>
					</div>

					<!-- Submit button-->
					<!--  <input href="#pagePrint" id="check_buttom" type="submit" data-icon="refresh" data-iconpos="left"
						value="Check" data-mini="true">
						onclick="draw_TM()" -->
					<a href="#pagePrint" id="check_TM_button" data-role="button"
						data-icon="refresh" data-iconpos="left">Check</a>
				</div>
			</div>
			<div data-theme="a" data-position="fixed" data-role="footer"
				id="footer"></div>
		</div>
	</div>

	<!-- Page two -->


	<div data-role="page" id="pagePrint">
		<div id="panel-wrapper"></div>
		<div id="page-wrapper">
			<div data-role="header" id="header"></div>
			<div id="content-wrapper">
				<div data-role="content" id="content">
					<!-- Draw TM -->



					<div id="wrapper">
						<canvas id="drawTMCanvas" style="border: 1px solid #c3c3c3;">
               Your browser does not support the HTML5 canvas tag.
             </canvas>
						<div id="buttonWrapper">
							<input type="button" id="plus" value="+" data-inline="true">
							<input type="button" id="minus" value="-" data-inline="true">
						</div>
					</div>

					<!--test jason -->
					<p>
						Title: <span id="title"></span>
					</p>
					<p>
						Name: <span id="name"></span>
					</p>
					<p>
						Start date: <span id="startDate"></span>
					</p>
					<p>
						End date: <span id="endDate"></span>
					</p>




					<!-- Back button -->
					<a href="#pageSelect" data-role="button">Go Back</a>

					<!-- Add another graph button   href="#pageSelect"-->
					<a href="#dialogSelect" id="opendialog" data-role="button"
						data-transition="pop">Add Another Gragh</a>

				</div>
			</div>
			<div data-theme="a" data-position="fixed" data-role="footer"
				id="footer"></div>
		</div>
	</div>

	<!--page3-->
	<div data-role="page" id="dialogSelect">
		<div id="panel-wrapper"></div>
		<div id="page-wrapper">
			<div data-role="header" id="header"></div>
			<div id="content-wrapper">
				<div data-role="content" id="content">
					<!-- Select satellite-->
					<div data-role="fieldcontain" id="slect_satellite">
						<label for="select_Satellite"> Select Satellite: </label> <select
							id="select_Satellite" name="select_Satellite" data-mini="true">
							<option value="A1M">A1M</option>
							<option value="A1N">A1N</option>
							<option value="A2F">A2E</option>
							<option value="A2f">A2F</option>
						</select>
					</div>

					<!-- Select telemesure-->
					<div data-role="fieldcontain" id="slect_telemesure">
						<label for="select_Telemesure"> Select Telemeuse: </label> <select
							id="select_Telemesure" name="select_telemesure" data-mini="true">
							<option value="tm2">tm1</option>
							<option value="tm2">tm2</option>
							<option value="tm3">tm3</option>
						</select>
					</div>

					<!-- Select start date-->
					<div>
						<label for="startdate">Start Date</label> <input name="startdate"
							id="startdate" type="date" data-role="datebox"
							data-options='{"mode": "calbox"}'>
					</div>
					<!-- Select end date-->
					<div>
						<label for="endate">End Date</label> <input name="endate"
							id="endate" type="date" data-role="datebox"
							data-options='{"mode": "calbox"}'>
					</div>

					<a href="#pagePrint" data-role="button" id="close_dialog">Close</a>

					<a href="#pagePrint" data-role="button" id="check_TM_button"
						onclick="add_TM()">Add</a>
				</div>
			</div>
			<div data-theme="a" data-position="fixed" data-role="footer"
				id="footer"></div>
		</div>
	</div>


</body>
</html>
